<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>User add</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="CSS/style.css">
	
	<script type="text/javascript">
		function check(form)
		{
			if(form.userid.value=="")
			  {alert("please input userid");form.userid.focus();return false;}
			if(!/^\d+$/.test(form.userid.value))
			  {alert('userID is illegal');form.userid.focus();return false;}
			if(form.userid.value.length!=8)
			  {alert('userID length is illegal,8 bits');form.userid.focus();return false;}
			
			if(form.firstname.value=="")
			  {alert("please input firstname"); form.firstname.focus();return false;}	
			if(!/^[A-Za-z]+$/.test(form.firstname.value))
			  {alert("only charactor is expected for firstname");form.firstname.focus();return false;}
			
			if(form.lastname.value=="")
			  {alert("only charactor is expected for firstname"); form.lastname.focus();return false;}
			if(!/^[A-Za-z]+$/.test(form.lastname.value))
			  {alert('last name can not contain the number');form.lastname.focus();return false;}
						
			if(form.age.value!="" && !/^(?:[1-9][0-9]?|1[01][0-9]|120)$/.test(form.age.value))
			  {alert('Age is illegal');form.age.focus();return false;}
			
			if(form.phone.value!="" && !/^\d+$/.test(form.phone.value))
			  {alert('Phone is illegal');form.phone.focus();return false;}
			
			if(form.email.value=="")
			  {alert("please input email"); form.email.focus();return false;}
			if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(form.email.value))
			  {alert("please confirm the E-mail address");form.email.focus();return false;}
			
			form.submit();
		}
	
	</script>

</head>
<body>

<table width="778"  border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;">
  <tr>
    <td valign="top" bgcolor="#FFFFFF">
    <table width="99%" height="510"  border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="tableBorder_gray">
  <tr>
    <td height="510" valign="top" style="padding:5px;"><table width="98%" height="487"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="22" valign="top" class="current_addr">Current address：User &gt;&gt; <font color="red">Add</font></td>
      </tr>
      <tr>
        <td align="center" valign="top">
        <table width="100%" height="493"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="top">
    
	<form name="form1" method="post" action="UserAddServlet?option=adduser">
	<table width="700" height="432"  border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      </tr>
      <tr>
        <td align="center" width="173" class="attr">User ID：</td>
        <td>
        <input name="userid" type="text"  maxlength="8" >
        <font color="red">&nbsp;&nbsp;*&nbsp;&nbsp;</font>
        eight numbers.</td>    
      </tr>
      
      <tr>
        <td width="173" align="center" class="attr">Firstname：</td>
        <td height="39">
        <input name="firstname" type="text" maxlength="30">
        <font color="red">&nbsp;&nbsp;*&nbsp;&nbsp;</font>
        only character is expected,maxlength is 30.</td>
      </tr>
       <tr>
        <td width="173" align="center" class="attr">Surname：</td>
        <td  height="39">
          <input name="lastname" type="text" maxlength="30">
          <font color="red">&nbsp;&nbsp;*&nbsp;&nbsp;</font>
          only character is expected,maxlength is 30.</td>
      </tr>
      <tr>
        <td width="173" align="center" class="attr">Gender：</td>
        <td height="35">
          <input name="gender" type="radio" class="noborder" id="radiobutton" value="male" >
          <label for="radiobutton">male </label>
          <label>
          <input name="gender" type="radio" class="noborder" value="female"> female
          </label></td>
      </tr>
      <tr>
        <td align="center" class="attr">Age：</td>
        <td height="35">
        <input name="age" type="text" maxlength="3">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        range is from 1 to 120,alternative.
        </td>
      </tr>
      
      <tr>
        <td align="center" class="attr">Phone：</td>
        <td height="35">
        <input name="phone" type="text" maxlength="13">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        maxlength is 13. number is expected.
        </td>
      </tr>
      <tr>
        <td align="center" class="attr">Email：</td>
        <td height="35">
        <input name="email" type="text" id="email" size="40" maxlength="50">
        <font color="red">&nbsp;&nbsp;*&nbsp;&nbsp;</font>
        maxlength is 50.
      </tr>
      
      <tr>
        <td align="center" class="attr">Remark：</td>
        <td><textarea name="remark" cols="50" rows="5" id="remark" style="overflow-y:auto; resize: none;"></textarea></td>
      </tr>
      <tr>
        <td align="center">&nbsp;</td>
        <td>
        <input name="Submit" type="button" class="btn" value="save" onClick="check(form1)">&nbsp;
		<input name="reset" type="reset" class="btn" value="reset">&nbsp;
		<input name="back" type="button" class="btn" value="back" onClick="history.back()"></td>
      </tr>
    </table>
	</form>
	</td>
  </tr>
</table></td>
      </tr>
    </table>
</td>
  </tr>
</table></td>
  </tr>
</table>

</body>
</html>
